<template>
  <view class="bg-guide-container">
    <u-swiper
      :list="bgGuideInfo"
      mode="dot"
      :current="currentBgGuide"
      :height="290"
      :border-radius="8"
      :autoplay="false"
      bg-color="#f3f7fb"
      @change="changeBgGuide"
    ></u-swiper>
    <view class="bg-guide-footer">
      <view class="tip">左右滑动切换更多背景图</view>
      <view class="downloadBgGuide" @click="getCodeList()">
        <text>图片保存</text>
        <u-icon name="download" color="#56d39d" size="24"></u-icon>
      </view>
    </view>
    <!-- 选择主页 移动图片 -->
    <u-select
      v-model="codeInfo.showSelect"
      :list="codeInfo.codeList"
      confirm-color="#56d39d"
      value-name="code"
      label-name="code"
      @confirm="confirmCode"
    ></u-select>
    <!-- 弹起保存背景指引 -->
    <u-popup
      v-model="saveGuidePopup"
      mode="center"
      :closeable="false"
      border-radius="0"
      width="525"
    >
      <view class="popup-content1">
        <image :src="guideImage" mode="scaleToFill" class="guide-image" />
        <view class="btn-tips" @click="savePoster">
          <!-- #ifdef H5 -->
          <text>长按保存</text>
          <!-- #endif -->
          <!-- #ifndef H5 -->
          <text>保存图片</text>
          <!-- #endif -->
        </view>
      </view>
    </u-popup>
    <lPainter
      :board="posterObj"
      ref="painter"
      @success="createPosterSuccess"
      :isRenderImage="true"
    ></lPainter>
  </view>
</template>

<script>
import lPainter from "@/components/limePainter/index.vue";
import { codeByUserId } from "@/api/artworks";
export default {
  components: {
    lPainter,
  },
  props: {
    bgGuide: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      guideImage: "",
      bgGuideInfo: [],
      codeInfo: {
        codeList: [],
        showSelect: false,
      },
      currentBgGuide: 0,
      saveGuidePopup: false,
      posterObj: {
        width: "375px",
        height: "213px",
        background: "#fff",
        borderRadius: "0px",
        views: [],
      },
      bgImg: "",
      bgTop: "",
    };
  },
  watch: {
    bgGuide: {
      immediate: true,
      handler(val) {
        if (val) {
          this.bgGuideInfo = val;
        }
      },
    },
  },
  methods: {
    // 切换背景指引
    changeBgGuide(index) {
      this.currentBgGuide = index;
    },

    // 获取code信息列表
    getCodeList() {
      this.bgImg = `${this.bgGuideInfo[this.currentBgGuide].image}?${Date.parse(
        new Date()
      )}`;
      this.bgTop = this.bgGuideInfo[this.currentBgGuide].y;
      codeByUserId({ code_type: "3" }).then((result) => {
        if (result && result.data && result.data.length > 0) {
          this.codeInfo.codeList = result.data;
          this.codeInfo.showSelect = true;
        }
      });
    },

    // 确定选择了code
    confirmCode(val) {
      let _this = this;
      const code = val[0].value;
      console.log("confirmCode", code, this.bgImg);
      // const image = this.bgGuideInfo[this.currentBgGuide].image;
      // console.log('image>>>',image)
      const isAndroid = /android/i.test(navigator.userAgent.toLowerCase());
      let top = this.bgTop;
      if (isAndroid) {
        top = parseInt(top) + 5;
      }
      this.posterObj.views = [
        {
          type: "image",
          src: _this.bgImg,
          css: {
            left: "0",
            top: "0",
            width: "375px",
            height: "213px",
            borderRadius: "0",
          },
        },
        {
          type: "text",
          text: code,
          css: {
            fontSize: `${this.bgGuideInfo[this.currentBgGuide].fontSize}px`,
            fontWeight: "bold",
            color: this.bgGuideInfo[this.currentBgGuide].color || "#000000",
            left: `${this.bgGuideInfo[this.currentBgGuide].x}px`,
            top: `${top}px`,
          },
        },
      ];
    },

    // 保存图片
    savePoster() {
      // #ifdef MP-WEIXIN
      uni.showLoading({
        title: "保存中",
        mask: true,
      });
      uni.saveImageToPhotosAlbum({
        //保存到本地
        filePath: this.guideImage,
        success(res) {
          uni.hideLoading();
          uni.showToast({
            title: "保存成功",
            icon: "none",
          });
        },
        fail(err) {
          console.log(err);
          uni.hideLoading();
        },
      });
      // #endif
    },

    // 创建图片
    createPosterSuccess(img) {
      uni.showLoading({
        title: "加载中...",
        icon: "loading",
      });
      // console.log('createPosterSuccess',img.replace(/[\r\n]/g, ""))
      let _this = this;
      if (img) {
        this.guideImage = img.replace(/[\r\n]/g, "");
        setTimeout(() => {
          _this.saveGuidePopup = true;
          uni.hideLoading();
        }, 1000);
        
      }
    },

    // 保存背景指引
    downloadBgGuide() {},
  },
};
</script>

<style lang="scss" scoped>
.bg-guide-footer {
  padding-top: 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .tip {
    color: #666;
    font-size: 24rpx;
  }

  .downloadBgGuide {
    color: $uni-color-primary;
    font-size: 24rpx;
  }
}

.popup-content1 {
  padding: 0;
  background-color: #fff;
  color: #fff;
  position: relative;
  text-align: center;
  padding-bottom: 12rpx;

  .swiper {
    height: 896rpx;
  }

  .poster-item {
    height: 896rpx;
    width: 525rpx;
  }

  .btn-tips {
    height: 64rpx;
    line-height: 64rpx;
    color: #fff;
    border-radius: 32rpx;
    background: linear-gradient(
      -90deg,
      $uni-color-primary,
      $uni-color-primary2
    );
    margin: 24rpx 100rpx;
  }

  .guide-image {
    width: 525rpx;
    height: 298rpx;
  }
}
</style>
